import React, { Component, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';

// 导入路由配置表


// 当前组件既能生成一级路由规则,也能生成二级规则,
// 必须给当前组件传入一个需要渲染的路由配置表

class RouterView extends Component<any, any> {
    render() {
        return (
            <Suspense fallback={<div className='loading' > <img src={'https://hbimg.huaban.com/8f9d549f1f3c51fc857509579457bf0a6eaf20e170a5-CpwzBT_fw658'} alt="" /> </div>}>
                <Switch>
                    {/* 动态生成路由规则 */}
                    {
                        this.props.routes.map((item: any, index: any) => {
                            return (
                                item.from ?
                                    <Redirect key={index} from={item.from} to={item.to} /> :
                                    <Route key={index} path={item.path} render={(props) => {
                                        if (item.children) {
                                            //如果当前路由下有嵌套路由,将嵌套路由的路由规则通过routes属性传到item.component这个组件中
                                            //为了防止路由匹配成功时渲染出来的组件丢失history,location,match, 需要将props展开通过属性的方式传入组件.
                                            return <item.component {...props} routes={item.children} />
                                        } else {
                                            return <item.component {...props} />
                                        }
                                    }} />
                            )
                        })
                    }
                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;